<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <el-card class="header-card">
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="addFn('1', '0')"
          >添加权限</el-button
        >
      </el-row>
      <!-- 分割线 -->
      <el-divider />
      <!-- 表格 -->
      <el-table :data="pageData" border style="width: 100%" row-key="id">
        <el-table-column prop="title" label="权限名称" align="center" />
        <el-table-column prop="code" label="权限标识" align="center" />
        <el-table-column prop="description" label="权限描述" align="center" />

        <el-table-column prop="address" label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              size="small"
              type="primary"
              @click="addFn('1', `${row.id}`)"
              >添加子权限</el-button
            >
            <el-button size="small" @click="editPerm(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delPermissList(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分割线 -->
      <el-divider />
      <!-- 分页 -->
    </el-card>
    <!-- 弹窗组件 -->
    <div>
      <el-dialog
        :title="formData.id? '编辑权限':'添加权限'"
        :visible="showDialog"
        width="50%"
        @close="closeFn"
      >
        <el-form :rules="rules" :model="formData" ref="form" label-width="80px">
          <el-form-item label="权限名称" prop="title"
            ><el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="appendPerm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissList, addPermissList,delPermissList,editPerm,alterPerm } from "@/api/permissions";
export default {
  data() {
    return {
      pageData: [],
      showDialog: false,
      formData: {
        title: "",
        code: "",
        description: "",
        type: 1,
        pid: 0,
        children: {
          description: "",
          title: "",
        },
      },
      rules: {
        title: [{ required: true, message: "请填写权限名称", trigger: "blur" }],
        code: [{ required: true, message: "请填写权限标识", trigger: "blur" }],
        description: [
          { required: true, message: "请填写权限描述", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getPermissList();
  },
  methods: {
    // 打开编辑弹窗
    editPerm(id){
        console.log(96,id);
        this.showDialog = true
        const res = editPerm(id)
       res.then(item =>{
        this.formData = item.data
        });
        console.log(102,this.formData);
    },
    // 点击删除
 delPermissList(id){
      this.$confirm('是否永久删除数据?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delPermissList(id)
             this.getPermissList();
        }).catch(() => {       
        });
},
    // 新增 || 编辑
    async appendPerm() {
      await this.$refs.form.validate();
      if(this.formData.id){
        // 编辑
       await alterPerm(this.formData)
      }else{

    await addPermissList(this.formData);
      }
      this.getPermissList();
      this.closeFn();
    },
    // 关闭弹窗
    closeFn() {
      (this.formData = {
        title: "",
        code: "",
        description: "",
        type: 1,
        children: {
          description: "",
          title: "",
        },
      }),
        this.$refs.form.resetFields();
      this.showDialog = false;
    },
    // 渲染列表
    async getPermissList() {
      const res = await getPermissList();
      this.pageData = this.listToTree(res.data, '0');
      console.log(108, this.pageData);
    },
   listToTree(list,id){
       const arr = []
    list.forEach(item => {
        if(+item.pid === +id){
            arr.push(item)
            item.children = this.listToTree(list,item.id)
        }
    });
    return arr
   },
    // 点击打开弹窗
    addFn(type, pid) {
      this.showDialog = true;
      this.formData.type = type;
      this.formData.pid = pid;
    },
  },
};
</script>

<style lang='scss' scoped>
.dashboard-container {
  margin: 20px;
}
::v-deep .ql-container {
  min-height: 120px;
}
</style>
